<template>
    <div class="app-container">
        <header-title/>
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="85px"
        >
            <el-form-item label="关键词" prop="keyword">
                <el-input
                    v-model="queryParams.keyword"
                    placeholder="请输入名称/供应商模型ID"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="训练状态" prop="trainingStatus">
                <el-select
                    v-model="queryParams.trainingStatus"
                    placeholder="请选择训练状态"
                    clearable
                >
                    <el-option label="训练中" :value="1" /> 
                    <el-option label="训练成功" :value="2" />
                    <el-option label="训练失败" :value="3" /> 
                </el-select>
            </el-form-item>
           
            <el-form-item label="标签" prop="tags">
                <el-select
                    v-model="queryParams.tags"
                    placeholder="请选择标签"
                    clearable
                >
                    <el-option 
                        v-for="dict in dict.type.system_timbre_type" 
                        :label="dict.label" 
                        :key="dict.value" 
                        :value="dict.value">
                    </el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item class="mar-r-20">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery"
                >搜索</el-button
                >
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">新增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="handleDelete">删除</el-button>

            </el-form-item>
        </el-form>
        <el-table
            v-loading="loading"
            :data="tableList"
            @selection-change="handleSelectionChange"
        >   
            <el-table-column  type="selection" width="50" align="center"/>

            <el-table-column  label="音色名称">
                <template slot-scope="scope">
                    <div>{{ scope.row.name || '-' }} </div>
                </template>
            </el-table-column>
            <el-table-column  label="训练音频地址" min-width="200">
                <template slot-scope="scope">
                    <div>{{ scope.row.trainingAudioUrl || '-' }}</div>
                </template>
            </el-table-column>
            <el-table-column  label="训练状态">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.trainingStatus == 1">训练中</el-tag>
                    <el-tag type="success" v-if="scope.row.trainingStatus == 2">训练成功</el-tag>
                    <el-tag type="danger" v-if="scope.row.trainingStatus == 1">训练失败</el-tag>

                </template>
            </el-table-column>
            
            <el-table-column  label="标签">
                <template slot-scope="scope">
                    <div>{{ selectDictLabel(dict.type.system_timbre_type,scope.row.tags) ||'-'}}</div>
                </template>
            </el-table-column>
            <el-table-column  label="发布日期">
                <template slot-scope="scope">
                    <div>{{ scope.row.createTime || '-' }}</div>
                </template>
            </el-table-column>
            <el-table-column  label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="handleUpdate(scope.row,'detail')"
                    >详情</el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row,'edit')"
                    >修改</el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="onHandleClickDel(scope.row.aiPersonAudioModelId)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        >
        </pagination>
        <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
            <addMaterial :id="detailId" :type="type" @close="open = false" @success="success" v-if="open"></addMaterial>
        </el-dialog>

    </div>
</template>
<script>
    import {listAiPersonAudio,deleteAiPersonAudio} from '@/api/materialManage/index.js'
    import addMaterial from './handle/add.vue'
    export default{
        name:'AudioModelManage',
        components: {addMaterial},
        dicts: ['system_timbre_type'],
        data() {
            return {
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    
                    modelType:1,
                    trainingStatus:'',
                    keyword:'',
                    tags:''
                },
                showSearch: true,
                total: 0,
                dateRange: [],
                // 表格数据
                tableList: [],
                loading: false,
                detailId: '',
                type:'',
                open: false,
                title:'',
                selectTable: []
            }
        },
        created() {
            this.getList()
        },
        methods: {
            handleDelete() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = this.selectTable.map(item => item.aiPersonAudioModelId)
                    deleteAiPersonAudio(ids.toString()).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList()
                    })
                   
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            handleSelectionChange(val) {
                this.selectTable = val
            },
            onHandleClickDel(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAiPersonAudio(id).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList()
                    })
                   
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            handleUpdate(row,type) {
                this.detailId = row.aiPersonAudioModelId
                this.type = type
                this.title = type == 'edit' ?'修改系统音色':'系统音色详情'
                this.open = true
            },
            success() {
                this.open = false
                this.handleQuery()
            },
            handleAdd(){
                this.detailId = ''
                this.type = 'add'
                this.title = '新增系统音色'
                this.open = true
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            getList() {
                this.loading = true;
                if (this.dateRange && this.dateRange.length) {
                    this.queryParams.createTimeStart = this.dateRange[0];
                    this.queryParams.createTimeEnd = this.dateRange[1];
                } else {
                    this.queryParams.createTimeStart = undefined;
                    this.queryParams.createTimeEnd = undefined;
                }
                
                
                listAiPersonAudio(this.queryParams).then((response) => {
                    this.tableList = response.data.records;
                    this.total = response.data.total;
                    this.loading = false;
                });
            }
        }
    }
</script>